<!--赞踩显示和操作-->
<script setup>

import {ref} from "vue";
import {useStore} from "vuex";

const props = defineProps({
  tid: {type: Number},
  pid: {type: Number},
  score: {type: Number},
})
// 数据更新事件
const emit = defineEmits(["update"])

const size = ref(15);
// type随分数变化
const getType = (s) => {
  if (s >= 30) {
    return 'success'
  }
  if (s >= 20) {
    return ''
  }
  if (s >= 10) {
    return 'warning'
  }
  return 'info'
}

const store = useStore()

//赞踩请求
const topicRecommend = (topicId, replyId, value) => {
  return store.dispatch("Read/topicRecommend", {topicId, replyId, value}).then(value => emit("update", value))
}

</script>

<template>
  <el-tag v-if="score!==undefined" :type="getType(score)" size="small" style="padding: 8px">
    <span class="clickable" @click="topicRecommend(tid,pid,1)">赞↑</span>
    <span style="margin-left: 8px;margin-right: 8px">{{ score }}</span>
    <span class="clickable" @click="topicRecommend(tid,pid,-1)">踩↓</span>
  </el-tag>
</template>

<style scoped>

</style>